import Taro, { Component } from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
import { DNavBar, DCheckOpinion, DLookImages } from '@/components'
import './index.scss'
import http from '@/api'

export default class CarriageCheckDetail extends Component {
  state = {
    moneyIcon: require('@/assets/images/money_icon.png'),
    fileIcon: require('@/assets/images/file_icon.png'),
    opinions: [
      {
        name: '审核通过',
        value: 'success',
      }, {
        name: '审核不通过',
        value: 'fail',
      }],
    detail: {},
    basicInfo: [],
    previewImg: {
      itemStatus: false,
      itemUrl: '',
    },
  }

  componentDidMount () {
    this.getTransCarCheckDetail()
  }

  async getTransCarCheckDetail () {
    let { id } = this.$router.params
    let detail = await http.getTransCarCheckDetail(id)
    this.setState({ detail })
    this.handleDetailData(detail)
  }

  handleDetailData (detail) {
    const { transCarInfoFileList, transDriverFileList } = detail
    const basicInfoMap = {
      ciName: '车辆名称',
      ciNo: '车牌号码',
      ciAge: '车辆年龄',
      drName: '司机姓名',
      refEnt: '所属公司',
    }
    let basicInfo = []
    Object.keys(basicInfoMap).forEach(key => {
      basicInfo.push({
        label: basicInfoMap[key],
        value: detail[key],
      })
    })

    let carFiles = [], carDriFiles = [], carInsFiles = []

    transCarInfoFileList.forEach(item => {
      switch (item.cfFileType) {
        case '1':
          carFiles.push(item)
          break
        case '2':
          carDriFiles.push(item)
          break
        case '3':
          carInsFiles.push(item)
          break
      }
    })

    basicInfo.push(
      {
        label: '车辆照片',
        list: carFiles,
      },
      {
        label: '车辆行驶证',
        list: carDriFiles,
      },
      {
        label: '车辆保险证明',
        list: carInsFiles,
      },
      {
        label: '司机驾驶证',
        list: transDriverFileList,
      },
    )

    this.setState({ basicInfo })
  }

  onLookHandle (url) {
    if (window.bridge) {
      let _images = [], i = 0
      _images.push(url)
      window.bridge.callHandler('previewPhoto',
        { 'index': i, 'images': _images }, function responseCallback () { })
    } else {
      this.setState({
        previewImg: {
          itemStatus: true,
          itemUrl: url,
        },
      })
    }
  }

  onLookItem () {
    this.setState({
      previewImg: {
        ...this.state.previewImg,
        itemStatus: false,
        itemUrl: '',
      },
    })
  }

  onConfirm = ({ checkOpinion, explain }) => {
    Taro.showModal({
      title: '提示',
      content: '是否确定提交',
      success: ({ confirm }) => {
        if (confirm) {
          http.checkCarCheck({
            id: this.$router.params.id,
            status: checkOpinion === 'success' ? 1 : 2,
          }).then(() => {
            Taro.showToast({
              title: '操作成功',
              icon: 'success',
            })
            setTimeout(() => Taro.navigateBack(), 2000)
          })
        }
      },
    })
  }

  render () {
    const { opinions, basicInfo, previewImg, detail } = this.state

    return (
      <View className="carriage-check-detail">
        <DNavBar title="运输车辆审核详情"></DNavBar>

        <View className="info">
          {
            basicInfo.map(item => (
              item.list === undefined ? <View className="item">
                  <View className="label">{item.label}</View>
                  <View className="value">{item.value}</View>
                </View> :
                item.list.length && <View className="item">
                  <View className="label">{item.label}</View>
                  <View className="value">
                    {
                      item.list.map(item => (
                        <Image className="photo" src={item.cfFileUrl}
                               onClick={this.onLookHandle.bind(this, item.cfFileUrl)}></Image>
                      ))
                    }
                  </View>
                </View>
            ))
          }
        </View>

        {
            (detail.ciCarStatus == 1 || detail.ciCarStatus == 2) &&
            <View>
              <View className="border"></View>
              <View className="check-detail">
                <View className="check-detail__title">审核</View>
                <View className="item">
                  <View className="label">审核操作</View>
                  <View className="value">{detail.status == 1 ? '审核通过' : '审核不通过'}</View>
                </View>
              </View>
            </View>
        }

        {
          detail.ciCarStatus === '0' && (
            <View>
              <View className="border"></View>
              <DCheckOpinion type="carriage" opinions={opinions} onConfirm={this.onConfirm} onCancel={Taro.navigateBack} />
            </View>
          )
        }

        <DLookImages status={previewImg.itemStatus} url={previewImg.itemUrl}
                     onLookHandle={this.onLookItem.bind(this)}></DLookImages>
      </View>
    )
  }
}
